<template>
  <!-- 卡片 -->
  <el-card class="box-card">
    <template #header>
      <el-button type="primary" :icon="Plus" @click="addTrademark">添加</el-button>
    </template>

    <!-- 表格 -->
    <el-table border :data="teademarkData">
      <el-table-column label="序号" width="80" align="center" type="index"></el-table-column>
      <el-table-column prop="tmName" label="品牌名称"></el-table-column>
      <!-- 这里使用自定义列 -->
      <!-- 也就是插槽 -->
      <el-table-column label="品牌LOGO">
        <template #default="{ row }">
          <img :src="row.logoUrl" style="width: 85px; height: 70px" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <!-- 这里使用自定义列 -->
        <!-- 也就是插槽 -->
        <template #default="{ $index, row }">
          <!-- 绑定 icon图标并设置按钮的颜色 -->
          <el-button type="warning" :icon="Edit" @click="handleEdit($index, row)">编辑</el-button>
          <el-button type="danger" :icon="Delete" @click="handleDelete($index, row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 6, 9]"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- v-model="dialogFormVisible" -->
    <!-- :model="form" -->
    <el-dialog v-model="isShow" :title="formRef.id ? '修改品牌' : '新增品牌'">
      <el-form style="width: 500px" label-width="100px" ref="ruleFormRef" :model="formRef" :rules="rules">
        <!-- :label-width="formLabelWidth" -->
        <el-form-item label="品牌名称" :label-width="formLabelWidth" prop="tmName">
          <!-- v-model="form.name" -->
          <el-input placeholder="请输入品牌信息" v-model="formRef.tmName" />
        </el-form-item>
        <el-form-item label="品牌LOGO" prop="logoUrl">
          <!-- action 用来绑定请求 接口 -->
          <el-upload
            class="avatar-uploader"
            action="/app-dev/admin/product/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="formRef.logoUrl" :src="formRef.logoUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            <template #tip>
              <div class="el-upload__tip">图片必须是JPG格式且不能大于2MB</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>

      <!-- 上传图片 -->

      <template #footer>
        <span class="dialog-footer">
          <!-- 调用函数将状态修改 -->
          <el-button @click="cancelTrademark(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="add(ruleFormRef)"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import { Delete, Edit, Plus } from '@element-plus/icons-vue'
import { ref, onMounted, reactive } from 'vue'
// 导入 api
import { trademarkList, addTrademark as addTrademarkOne, deleteTrademark } from '@/api/teademark'
import { ElMessage, ElMessageBox, type UploadProps, type FormRules, type FormInstance } from 'element-plus'
// 导入显示表单数据的类型规范
import type { trademarkListModel } from '@/api/teademark'

// 定义数据
const teademarkData = ref<trademarkListModel[]>([])

// 定义总数据 -(总条目数)
const total = ref(100)

// 定义当前页数
const currentPage = ref(1)

// 定义每页显示多少条数据
const pageSize = ref(3)

// 定义宽度
const formLabelWidth = '100px'

// 是否展示
const isShow = ref(false)

// 获取form组件实例
const ruleFormRef = ref<FormInstance>()

// 声明一个初始化 form 值 用于区分新增和编辑的两种弹框
const formRef = ref<trademarkListModel>({
  tmName: '',
  logoUrl: ''
})
// 添加数据(新增)回调
const addTrademark = () => {
  // 将状态修改用于展示弹框
  isShow.value = !isShow.value
  formRef.value = {
    tmName: '',
    logoUrl: ''
  }
}
// 取消按钮回调
const cancelTrademark = (formEl: FormInstance | undefined) => {
  // 修改状态
  addTrademark()
  // 重置表单校验
  if (!formEl) return
  formEl.resetFields()
}

// const resetForm = () => {

// }
// 保存按钮回调
const add = async (formEl: FormInstance | undefined) => {
  // 调用api发送请求
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      try {
        const res = await addTrademarkOne(formRef.value)
        // console.log(res)
        if (res.code === 200) {
          // 修改展示的状态
          addTrademark()
          // 提示用户添加成功
          ElMessage.success('添加成功')
          // 重新调用获取全部的数据
          getTrademarkData()
        }
      } catch (error) {
        ElMessage.error('添加失败')
        // 重新调用获取全部的数据
        getTrademarkData()
      }
    } else {
      console.log('品牌信息校验失败')
      return false
    }
  })
}

// 分页上的两个方法
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  // 重新定义每页展示多少条数据
  pageSize.value = val
  // 再次发送请求
  getTrademarkData()
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  // 重新定义当前页码
  currentPage.value = val
  // 从新发送请求
  getTrademarkData()
}

// 表格操作 两个按钮方法
// 定义好类型
// 编辑按钮
const handleEdit = async ($index: number, row: trademarkListModel) => {
  // $index 为下标
  // row 为当前列表格中的数据
  // 修改状态
  addTrademark()
  // 展示数据
  formRef.value = { ...row }
}
// 删除按钮
const handleDelete = async ($index: number, row: trademarkListModel) => {
  // console.log($index, row)
  ElMessageBox.confirm(`确定删除${row.tmName}吗?`, 'Warning', {
    // 确定回调
    confirmButtonText: '确定',
    // 删除回调
    cancelButtonText: '取消',
    // 类型
    type: 'warning'
  })
    // 成功回调
    .then(async () => {
      // 在成功回调中调用 api 发送请求
      // 断言
      const res = await deleteTrademark(row.id as number)
      if (res.code === 200) {
        // 重新获取全部数据
        getTrademarkData()
      }

      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'error',
        message: '已取消'
      })
    })
}

// 上传图片的两个方法
// 上传后
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  console.log(uploadFile)
  // 存储logo数据
  formRef.value.logoUrl = response.data
  // formRef.value.logoUrl = URL.createObjectURL(uploadFile.raw!)
}
// 上传之前
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('图片必须是JPG格式!!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  return true
}

// 定义 获取表格数据的api
const getTrademarkData = async () => {
  try {
    // 调用 api 发送请求
    // 传递真实数据
    const res = await trademarkList(currentPage.value, pageSize.value)
    console.log(res) // 测试
    // 判断业务状态码
    if (res.code === 200) {
      // 将数据存储
      teademarkData.value = res.data.records
      // 将总数据存储
      total.value = res.data.total
    }
  } catch (error) {
    ElMessage.error('获取表格数据失败,请重试')
  }
}

// 定义表单校验规则
const rules = reactive<FormRules>({
  tmName: [
    { required: true, message: '必须传入品牌名称', trigger: 'blur' },
    { min: 2, max: 5, message: '最少为2个字符,最大为5个字符', trigger: 'blur' }
  ],
  logoUrl: [{ required: true, message: '必须传入图片', trigger: 'blur' }]
})
// 在组件挂载 调用方法
onMounted(() => {
  getTrademarkData()
})

// 设置监听属性
// watch(
//   teademarkData,
//   (newVal) => {
//     console.log(newVal)
//   },
//   { immediate: true, deep: true }
// )
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
